<template>
  <div class="shop">
    <div class="shop_top">
      <div class="shop_p1">
        <span class="span_one"><img src="../../../static/img/170707_87i9h50a3dkd009g8i18fhh90afjg_200x200.jpg_100x100.jpg"></span>
        <span class="span_two">lovefollow箱包旗舰店<img src="../../../static/img/idid_ie4wkmrrhbrgcojtmqzdambqgqyde_56x36.png"></span>
        <span class="span_three"><a href="#">进店></a></span>
      </div>
      <div class="shop_p2">
        <p>
          <span style="font-size: 16px;color:#333;">52633</span>
          <span>总销量</span>
        </p>
        <p>
          <span style="font-size: 16px;color:#333;">12577</span>
          <span>总收藏</span>
        </p>
        <p>
          <span style="display: flex">描述相符:<i style="display: inline-block;color:#00cc00;padding-left:0.02rem;">4.71</i></span>
          <span style="display: flex">质量满意:<i style="display: inline-block;color:#00cc00;padding-left:0.02rem;">4.71</i></span>
        </p>


      </div>
    </div>
    <!--店铺详情-->
    <div class="shop_msg">
      <ul class="shop_list">
        <li class="lis active" ><a href="javascript:void(0)" style="color: #FF5777">图文详情</a></li>
        <li class="lis"><a href="javascript:void(0)">商品参数</a></li>
        <li class="lis"><a href="javascript:void(0)">热卖推荐</a></li>
      </ul>
      <div class="shop_text">
        <div class="shop_a active">
          <img src="../../../static/img/170911_616i355hich1ch2d5dc2l0il0977a_790x1451.jpg_468x468.jpg">
          <img src="../../../static/img/170911_37h9caciaebel5ea7k0e5dl93ff8e_790x1031.jpg_468x468.jpg">
          <img src="../../../static/img/170914_6c0kdkf8lflbd115k01akh6l16k5e_790x1117.jpg_468x468.jpg">
        </div>
        <div class="shop_a">
          <img src="../../../static/img/170806_07f78lbg82c48848bc39l30d606ji_640x811.jpg_468x468.jpg">
          <img src="../../../static/img/170720_741bbe9cifg3475j5g84edj9ich8i_640x922.jpg_468x468.jpg">
          <img src="../../../static/img/170720_33bh2451lbl59l5e8529a17ch4ld1_640x644.jpg_468x468.jpg">
          <img src="../../../static/img/170720_5fk4l26j8fk4fi8fecf883j721hi2_640x726.jpg_468x468.jpg">
        </div>
        <div class="shop_a">
          <img src="../../../static/img/170720_5l043i4l8jlchb84ckb0lf9jb1095_640x831.jpg_468x468.jpg">
          <img src="../../../static/img/170720_2l0b087ghh13eg34b0alf625jka39_640x699.jpg_468x468.jpg">
          <img src="../../../static/img/77101615_6f3ak83kkl00329ged9249aa93ifb_1125x285.jpg_468x468.jpg">
        </div>
      </div>

    </div>


  </div>

</template>
<script type="text/ecmascript-6">
//  import "../../assets/js/jquery-1.8.3.min"
    export default {
      components:{

      },
      methods:{


      },
      mounted:function(){
        $(".shop_list>li").live("click",function(){
          $(".shop_list>li").each(function(){
            $(this).removeClass(" active");
            $(this).children().css({"color":"#333"})
          });
          $(this).addClass("active");
          $(this).children().css({"color":"#ff5777"})
          var index = $(this).index();
          $(".shop_a").css({"display":"none"})
          $($(".shop_a")[index]).css({"display":"block"});
        });

      }

    }


</script>
<style scoped>
  /*=====shop=====*/
  .shop{
    background: #EAEAEA;
  }
  .shop_top{
    background: #fff;
    padding: 0.1rem 0.05rem;
    margin-top: 0.1rem;
    margin-bottom: 0.1rem;
  }
  .shop_p1{
    display:flex;
    justify-content: space-between;
  }
  .span_one img{
    width: 0.5rem;
    height: 0.5rem;
    display:block;
    margin-right:0.03rem;
  }
  .span_two{
    font-size: 14px;
    color: #333;
    display: flex;
    align-items: center;
  }
  .span_two img{
    width: 0.28rem;
    height: 0.18rem;
    display: block;
    margin-left: 0.03rem;
  }
  .span_three{
    padding:0.04rem 0.05rem;
    border:1px solid #ff2255;
    text-align: center;
    font-size:14px;
  }
  .span_three a{
    color:#ff2255;
  }
  .shop_p2{
    display: flex;
    justify-content: space-between;
    padding:0.08rem 0.4rem;
    box-sizing: border-box;
  }
  .shop_p2 p{
    width: 33.3%;
  }
  .shop_p2 p span{
    display: block;
    font-size:14px;
    color:#999;
  }
  /*======店铺详情======*/
  .shop_list{
    display: flex;
    justify-content: space-between;
    margin-top:0.1rem;
    background: #fff;
  }
  .lis{
    width: 33.3%;
    text-align: center;
    padding:0.1rem 0;

  }
  .lis a{
    font-size:16px;
    color:#333;
  }
  .shop_text img{
    width: 100%;
    display: block;
    margin:0 auto;
    margin-bottom:0.05rem;
  }

  .active{
    border-bottom: 1px solid #FF5777;


  }



</style>
